<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box">
      <h6 class="common-title">申请提现</h6>
      <section v-loading="loading">
        <el-button-group class="sub-nav">
          <el-button size="mini" type="primary" @click="$router.push('/withdraw4')">申请提现</el-button>
          <el-button size="mini" type="primary" @click="$router.push('/withdraw-way4')">提现方式</el-button>
          <el-button size="mini" type="primary" @click="$router.push('/withdraw-list4')">提现记录</el-button>
        </el-button-group>
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        style="width: 500px"
      >
        <el-form-item v-if="form.userID" label="当前状态">
          <em v-if="form.cashMethodState === 1">审核中</em>
          <em v-else-if="form.cashMethodState === 2">审核通过</em>
          <em v-else-if="form.cashMethodState === 3">审核中</em>
        </el-form-item>
        <el-form-item label="提现方式">
          <el-select
            style="width: 380px"
            v-model="form.cashTypeID"
            placeholder="请选择提现方式"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.cashTypeName"
              :value="item.cashTypeID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现卡号">
          <el-input v-model="form.cashAccount"></el-input>
        </el-form-item>
        <el-form-item label="确认卡号">
          <el-input v-model="confirmCashAccount"></el-input>
        </el-form-item>
        <el-form-item label="开户名">
          <el-input v-model="form.cashName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">修改提现方式</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
  </div>
</template>

<script>
export default {
  layout: 'webIn4',
  async asyncData({ $axios }) {
    const res = await $axios.get('/finance/cashType/list')
    let list = []
    if (res.code === 1001 && res.body) {
      list = res.body
    }
    const ares = await $axios.get('/finance/cashMethod/get')
    let form = { cashTypeID: '', cashAccount: '', cashName: '' }
    if (ares.code === 1001 && ares.body) {
      form = ares.body
    }
    return {
      list,
      form
    }
  },
  data() {
    return {
      loading: false,
      confirmCashAccount: '',
    }
  },
  methods: {
    update() {
      if (!this.form.cashTypeID) {
        return this.$message.error('请选择提现方式')
      }
      if (!this.form.cashAccount) {
        return this.$message.error('请输入提现账户号')
      }
      if (!this.form.cashName) {
        return this.$message.error('请选择提现账户名')
      }
      this.$confirm(
        '提交申请后，将进入审核状态，审核通过前将无法进行提现，是否继续？'
      ).then(() => {
        this.doUpdate()
      })
    },
    async doUpdate() {
      if(this.confirmCashAccount !== this.form.cashAccount) {
        return this.$message.error('两次输入的卡号不一致')
      }
      this.loading = true
      const res = await this.$axios.post('/finance/cashMethod/add', null, {
        params: {
          cashTypeID: this.form.cashTypeID,
          cashAccount: this.form.cashAccount,
          cashName: this.form.cashName
        }
      })
      if (res.code === 1001) {
        location.reload()
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.sub-nav {
  margin-bottom: 28px;
  position: absolute;
  top: 8px;
  right: 10px;
  a {
    float: none;
    display: inline-block;
    text-decoration: none;
    color: $--deep-gray-text-color;
    &:hover {
      color: $--color-primary;
    }
    &.selected {
      line-height: 34px;
      color: $--color-primary;
      border-bottom: 2px solid $--color-primary;
    }
  }
  a + a {
    margin: 0 0 0 15px;
  }
}
section {
  padding: 15px;
  background: white;
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
.usercenter-box {
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-button {
    padding: 12px 20px;
  }
}
</style>
<style>
@import 'assets/style/el-adapter.css';
</style>
